<template>
  <span>
    <el-tag class="tag" size="mini" v-for="(item, index) in status" :key="index">{{ item }}</el-tag>
  </span>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      required: true
    }
  },
  data(){
    return{
      status: []
    }
  },
  created() {
    let list = this.value.split(',');
    if (list.length > 1) {
      list.forEach(item => {
        this.status.push(this.getStatus(item));
      })
    }else{
      this.status.push(this.getStatus(this.value));
    }
  },
  methods: {
    getStatus(value){
      switch (value) {
        case '1':
          return 'GET';
          break;
        case '2':
          return 'POST';
          break;
        case '3':
          return 'PUT';
          break;
        case '4':
          return 'DELETE';
          break;
        case '5':
          return 'OPTIONS';
          break;
        case '6':
          return 'HEAD';
          break;
        case '7':
          return 'TRACE';
          break;
        case '8':
          return 'CONNECT';
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style scoped>
.tag{
  margin-right: 5px;
}
</style>
